<!--
*  2021-03-15
*  纱线新增颜色
-->
<template>
  <div id="app" class="weaving-color">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      ref="header"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-cell-group>
      <van-cell
        title="系列"
        :value="seriesName"
        is-link
        @click="showPicker = true"
      ></van-cell>
      <van-cell title="编号">
        <template>
          <van-field v-model="no" placeholder="输入编号" type="tel" maxlength="4" clearable></van-field>
        </template>
      </van-cell>
      <van-cell title="名称">
        <template>
          <van-field
            v-model="name"
            placeholder="输入名称"
            clearable
          ></van-field>
        </template>
      </van-cell>
      <van-cell title="支数">
        <template>
          <van-field
            v-model="yarnStandard"
            type="tel"
            placeholder="输入支数"
            clearable
          ></van-field>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="weaving-color-btn">
      <van-button block type="info" class="bgColor" @click="onConfirmSubmit"
        >保 存</van-button
      >
    </van-cell-group>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="seriesName"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { comeBack } from "@/utils/index";
import { getYarnSeriesFilter, getYarnColorAdd } from "@/api/yarn";
// import dayjs from "dayjs";

export default {
  name: "yarnWeavingColor",
  data() {
    return {
      title: "新增颜色",
      no: "",
      seriesId: "",
      seriesName: "",
      name: "",
      yarnStandard: "",
      showPicker: false,
      columns: [],
      timeout: null,
      showStatus: false,
    };
  },
  created() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.onGetYarnSeriesFilter();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 返回
    onClickLeft() {
      comeBack();
    },
    // 获取系列
    onGetYarnSeriesFilter() {
      this.columns = [];
      getYarnSeriesFilter(
        {
          name: this.seriesName,
        },
        (res) => {
          res.forEach((item) => {
            let params = {};
            params.seriesName = item.name;
            params.seriesId = item.id;
            this.columns.push(params);
          });
        }
      );
    },
    // 保存
    onConfirmSubmit() {
      const that = this;
      getYarnColorAdd(
        {
          no: this.no,
          seriesId: this.seriesId,
          name: this.name,
          yarnStandard: this.yarnStandard,
        },
        () => {
          that.$toast({
            type: "success",
            message: '新增色号成功',
            duration: 1500,
            onClose: () => {
              comeBack();
            },
          });
        }
      );
    },
    // 确认编号
    onConfirm(val) {
      this.seriesName = val.seriesName;
      this.seriesId = val.seriesId;
      this.showPicker = false;
    },
    onCancel() {
      this.seriesId = "";
      this.showPicker = false;
    },
  },
};
</script>

<style lang="scss">
.weaving-color {
  display: flex;
  flex-direction: column;
  // padding-top: 22px;
  .van-cell {
    .van-cell__value {
      flex: 0 0 70%;
      .van-field {
        padding: 0;
        display: flex;
        .van-cell__value {
          flex: 1;
        }
        .van-field__control {
          text-align: right;
        }
      }
    }
  }
  .weaving-color-btn {
    padding: 16px;
    &.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
  }
}
</style>
